<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <script src="js/jquery-3.7.1.js"></script>
    <link href="css/newsInfo.css" rel="stylesheet">
</head>

<body>
    <div class="detailnew">
        <div id="news">
            <h2 id="newstitle"></h2>
            <p id="newsauthor"></p>
            <div id="newscontent">

            </div>
        </div>
        <div id="comments">
            <div class="top">
                <img src="images/新闻发布系统照片/图片1.png" />
                <span>全部评论</span>
            </div>
            <div class="n">
                <div class="nologin">
                    <h2>发表评论</h2>
                    <div class="empty">
                        请<a href="login.html">登录</a>之后发表评论
                        <button>发表</button>
                    </div>
                </div>
                <div class="login">
                    <h2>发表评论</h2>
                    <form action="" method="post" name="form1">
                        <textarea id="c">

                    </textarea>
                    </form>
                    <button onclick="publish()">发表</button>
                </div>
            </div>
            <div>
                <div class="commentuser">

                </div>
                <div id="nav">
                    
                </div>
            </div>

        </div>
    </div>

    <script>
        var user = JSON.parse(window.localStorage.getItem("user"));
        if (user == null) {
            //未登录
            $(".login").hide()
        } else {
            //已登录
            $(".login").show();
            $(".nologin").hide()
        }
        //html页面之间传递参数时用的代码
        var params = new URLSearchParams(window.location.search);
        var param1 = params.get("newsid");
        console.log(param1)
        //------
        $.ajax({
            url: "http://localhost:8080/demo/ShowNewsByIdServlet?newsid=" + param1,
            method: "get",
            dataType: "json",
            success: function (res) {
                if (res.code == 200) {
                    $("#newstitle").html(res.data.newstitle);
                    $("#newsauthor").html(res.data.newspublish + " " + res.data.newsdate);
                    $("#newscontent").html(res.data.newscontent);
                } else {
                    $("#news").html(res.msg);
                }
            }
        })
        function showComments(pageNum) {
            var user = localStorage.getItem('user')
            var pageSize = 5;//页面大小
            var total = 0;//总行数
            $("#nav").html("");
            $(".commentuser").html("");
            $.ajax({
                // url: "http://localhost:8080/demo/ShowCommentsServlet?newsid=" + param1,
                url: `http://localhost:8080/demo/ShowCommentsByPageServlet?newsid=${param1}&pageSize=${pageSize}&pageNum=${pageNum}`,
                method: "get",
                dataType: "json",
                success: function (res) {
                    console.log(user);
                    obj = JSON.parse(user);
                    console.log(res)
                    if (res.code == 200) {
                        total = res.total; //得到总行数
                        var pageMax = (total % pageSize == 0) ? (total / pageSize) : (total / pageSize + 1);
                        for (let i = 1; i <= pageMax; i++) {
                            let numdiv = `<div><a href='javascript:showComments(${i})'>${i}</a></div>`;
                            $("#nav").append(numdiv);

                        }

                        res.data.forEach(item => {
                            var div = `<div class="user">
                            <img src=http://localhost:8080/demo/${obj.useravator} class="touxiang">
                            <div class="author">${item.commentauthor}</div>
                            <p class="content">${item.commentcontent}</p>
                            <p class="date">${item.commentdate}</p>
                            </div>`
                            $(".commentuser").append(div);
                        });
                    } else {
                        $("#comments").html(res.msg);
                    }

                }
            })
        }
        showComments(1);
        function publish() {
            event.preventDefault(); //阻止表单提交默认行为
            var user = JSON.parse(window.localStorage.getItem("user"));//封装成JSON对象
            // var c = $("#c").val()
            //创建json数据 次数据就是向服务器提交的数据
            var obj = {
                "newsid": param1,
                "commentauthor": user.usernick,
                "commentcontent": $("#c").val() //文本域的内容
            }
            //访问后端接口
            $.ajax({
                url: "http://localhost:8080/demo/InsertCommentsServlet",
                method: "post",
                dataType: "json",
                data: JSON.stringify(obj), //obj是一个json对象,通过JSON.stringify()把他转成字符串，向服务器发送的数据
                success: function (res) {
                    if (res.code == 200) {
                        alert(res.msg);
                        showComments();
                    } else {
                        // $("#msg").html(res.msg);
                        alert(res.msg);
                    }
                }
            })
        }


    </script>
</body>

</html>